<template>
  <view class="padding  align-center full-width" v-if="loading">
    <u-loading-icon></u-loading-icon>
  </view>

  <view class="bx-table-wrap show-y-scroll-bar" v-else-if="headerColumns.length>0&&list.length>0">
    <view class="retail-list bx-table " :class="{long:long}" :style="{width:trWidth+'rem'}">
      <view class="bx-tr" v-if="headerColumns.length > 0" :style="{width:trWidth+'rem'}">
        <view class="bx-th bx-td" v-for="headCol in headerColumns" :style="{width:headCol._min_width+'rem'}">
          {{headCol.label}}
        </view>
      </view>
      <view class="bx-tr" v-for="(dataRow,index) in list" :style="{width:trWidth+'rem'}">
        <view class="bx-td" v-for="(headCol,i) in headerColumns" :style="{width:headCol._min_width+'rem'}">
          <view class="table-td-text">
            {{setColumnText(dataRow[headCol.columns])}}
          </view>
        </view>
      </view>
    </view>
  </view>

  <uni-table class="retail-list margin-bottom" border stripe emptyText="暂无数据"
    v-else-if="headerColumns.length>0&&list.length>0">
    <!-- 表头行 -->
    <uni-tr v-if="headerColumns.length > 0">
      <uni-th :width="tdWidth||150" align="center" v-for="headCol in headerColumns">
        {{headCol.label}}
      </uni-th>
    </uni-tr>
    <!-- 表格数据行 -->
    <uni-tr v-for="(dataRow,index) in list" :key="index">
      <uni-td v-for="(headCol,i) in headerColumns" :key="i">
        <view class="table-td-text" @click="onItemClick(dataRow)">
          {{setColumnText(dataRow[headCol.columns])}}
        </view>
      </uni-td>
    </uni-tr>
  </uni-table>

  <view class="padding align-center full-width" v-else @click="reload">
    <u-empty text="暂无数据"></u-empty>
  </view>
</template>

<script>
  export default {
    props: {
      tdWidth: {
        type: [String, Number]
      },
      orderNo: {
        type: [String, Number]
      },
      service: {
        type: String
      },
      long: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      trWidth() {
        return this.headerColumns.reduce((pre, cur) => {
          pre += cur._min_width
          return pre
        }, 0)
      },
      headerColumns() {
        let arr = []
        if (Array.isArray(this.columns) && this.columns.length > 0) {
          this.columns.forEach(col => {
            if (col.in_list == 1) {
              let textWidth = this.list.reduce((pre, cur) => {
                const text = '' + cur[col.columns]
                if (typeof text === 'string' && text.length > pre) {
                  pre = text.length
                }
                return pre
              }, 0)

              console.log(textWidth, 'textWidth');
              if (textWidth && textWidth > 7) {
                if (textWidth >= 20) {
                  textWidth = 20
                }
                col._min_width = textWidth * 2.5
              } else {
                col._min_width = 20
              }
              arr.push(col)
            }
          })
        }
        return arr
        // return this.columns.filter(item => item.in_list == 1)
      },
    },
    data() {
      return {
        columns: [],
        list: [],
        isLoad: false,
        loading: false
      }
    },
    created() {
      this.reload()
    },
    methods: {
      reload() {
        this.isLoad = false
        if (this.service) {
          this.getServiceV2(this.service, 'select', 'detaillist').then((res) => {
            this.columns = res._fieldInfo
            this.isLoad = true
          })
          this.getDetail(this.service)
        }
      },
      getDetail(srv) {
        let req = {}
        req = {
          "serviceName": srv,
          "colNames": ["*"],
          "condition": [{
            "colName": "order_no",
            "ruleType": "eq",
            "value": this.orderNo
          }],
          "page": {
            "pageNo": 1,
            "rownumber": 999
          }
        }
        if (srv) {
          this.loading = true
          this.$fetch('select', srv, req).then((res) => {
            this.loading = false
            if (res.success && Array.isArray(res.data)) {
              this.list = res.data
            }
          })
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .full-width {
    width: 100%;
  }

  .bx-table-wrap {
    overflow-x: auto;
    margin-bottom: 4rem;
    margin-top: 1rem;
  }

  .bx-table {
    border: #E3E3E3 1px solid;

    .bx-tr {
      display: flex;
      font-size: 2.4rem;
      border-bottom: #E3E3E3 1px solid;
      align-items: center;

      &:last-child {
        border-bottom: none;
      }

      &:nth-child(2n+1) {
        background-color: #FAFAFA;
      }

      .bx-td {
        padding: 1rem 2rem;
        word-break: break-all;
        border-right: 1px solid #E3E3E3;
        line-height: 4rem;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        align-items: center;
        height: 10rem;
        .table-td-text {
          flex: 1;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        &:last-child {
          border-right: none;
        }
      }

      .bx-th {
        background-color: #E3E3E3;
        font-weight: bold;
        color: #000;
        text-align: center;
        border-right-color: #fff;
      }
    }
  }

  .retail-list {
    overflow-x: scroll;

  }

  ::v-deep .uni-table-th-content {
    // white-space: nowrap;
  }

  ::v-deep .uni-table-td {
    font-size: 2.4rem;
    line-height: 2.4rem;
    // white-space: nowrap;
  }
</style>
